About Cosense
Help
Log in
kii's memo
u
s
e
R
e
f
h
o
o
k
s
m
u
t
a
b
l
e
可
変
な
r
e
f
r
e
a
c
t
オ
ブ
ジ
ェ
ク
ト
を
返
す
フ
ッ
ク
特
定
の
D
O
M
D
o
c
u
m
e
n
t
O
b
j
e
c
t
M
o
d
e
l
要
素
へ
の
ア
ク
セ
ス
や
、
置
き
換
え
可
能
な
値
の
保
持
に
利
用
F
u
n
c
t
i
o
n
a
l
C
o
m
p
o
n
e
n
t
で
も
D
O
M
D
o
c
u
m
e
n
t
O
b
j
e
c
t
M
o
d
e
l
要
素
に
ア
ク
セ
ス
可
能
に
な
っ
た
Related
Sort by
Related
Modified
Created
Last visited
Most linked
Page rank
Title
Links
Functional Component
[JavaScript]の[関数 函数 function]の形をした[Component コンポーネント code][hook React]によって、[State 状態]を持つことができるようになったレンダー内で[アロー関数 arrow function]`<button onClick={() => this.handleClick()}>Click Me</button>`コンポーネントがレンダーされるたびに新しい関数が作成される
ref react
DOM Document Object Model
>-ウェブページを表す [HTML HyperText Markup Language] のように - 文書の構造をメモリ内に表現することで、ウェブページとスクリプトやプログラミング言語を接続するもの>ウェブ上の文書のコンテンツと構造からなるオブジェクトのデータ表現>[HTML HyperText Markup Language]や[XML] 文書のためのプログラミングインターフェイスDOMを操作できる[Web Standards]も含む
hook React
[React]の[Functional Component]でも[State 状態]を管理可能にReact 16.8 で追加[関数コンポーネント]に [State 状態] や[React ライフサイクル]といった [React] の機能を “接続する (hook into)” ための関数以前は[Class Component]でしか [State 状態] や[React ライフサイクル]を持てなかった
DOM Document Object Model
Web Frontend Engineer Skills
あくまで、[Web front-end]がメイン他の分野は深く突っ込まない[Engineer Base Skills][Backend Engineer Skills]TODO:そのうち、Web platform に変えるかも
Element state
[component 構成要素]の中のより小さな各要素の[State 状態]具体的には、[DOM Document Object Model]の[html 要素]レベル[Cursor State][IntersectionObserverEntry State][Stacking context State]
innerHTML
[DOM Document Object Model]要素内の [HTML HyperText Markup Language]または [XML] のマークアップを取得したり設定できるプロパティ[https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML element.innerHTML - Web API | MDN]https://twitter.com/tonkotsuboy_com/status/1564782566078820352
URLをブラウザに入力してAppを表示するまで
JSX
[*# JavaScript eXtension][JavaScript]に[HTML HyperText Markup Language]ライクな構文を拡張したもの[シンタックスシュガー 糖衣構文]で、[Compile コンパイル]必要思想独立性の高い[Component コンポーネント code]単位に分割し、ロジックとデザインを完結させる
React DOM
[React]における[DOM Document Object Model]の扱い[React] 要素は[イミュータブル]UI を更新する唯一の方法新しい要素を作成して ReactDOM.render() に渡す実際、ReactDOM.render() を一度しか呼び出さないこと多い
@testing-library/react
[React] Testing Library builds on top of [DOM Document Object Model] [Test テスト Testing] Library by adding APIs for working with React components.
$refs
[Vue.js]で個別のDOM参照する親が子のメソッドを使用、イベントを発火したいあるDOM操作したい[DOM Document Object Model]操作なので、[ライフサイクルフック Vue]の[mounted]以降で使う参考
DOMContentLoadedイベント
[ページロード]に関する[Webブラウザ Web Browser]のイベント[表示速度]に対する[パフォーマンス 指標][DOM Document Object Model] と [CSSOM CSS Object Model] の両方の準備ができた時点サブリソースいである[CSS]や[画像 Image]などのロードは待たない[load イベント]
Front-End Study #5「2020年代のフロントエンド」
仮想DOM Virtual DOM
[JavaScript]オブジェクトで[DOM Document Object Model]と同じ構造のノードツリーを[メモリ Memory]上に再現しておき、最終的な差分だけを元の[DOM Document Object Model]に反映し[レンダリング Rendering Web]する技術[https://qiita.com/mizchi/items/4d25bc26def1719d52e6 なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita]
Web Standards
[https://www.w3.org/ World Wide Web Consortium (W3C)]🇺🇸[https://developer.mozilla.org/en-US/docs/Web/Reference/API Web API reference - Web technology reference | MDN]🇯🇵[https://developer.mozilla.org/ja/docs/Web/Reference/API Web API リファレンス - Web 技術リファレンス | MDN]
Seane Decentraland
Web Front End Interview
[Web front-end]の[エンジニア 技術面接 Interview]について以下に挙げられてるものを羅列し、足りないものは時間あるときに埋める[https://yangshun.github.io/front-end-interview-handbook/ Front End Interview Handbook | Front End Interview Handbook]上げられている質問に関連する情報をリンクなどで付与
DOM Based XSS
[JavaScript]側で発生する [XSS クロスサイトスクリプティング][*** 対策][DOM Document Object Model]操作の適切な[API]呼び出し[HTML HyperText Markup Language]で特別な記号文字を[エスケープ Escape][*** 発生箇所]
style-loader
[CSS]を[DOM Document Object Model]ツリーに挿入する[Loader ローダー]Inject [CSS] into the [DOM Document Object Model].[https://github.com/webpack-contrib/style-loader webpack-contrib/style-loader: Style Loader]渡された[CSS]の内容をStyleタグの形に変換
HTML History
[HTML HyperText Markup Language]の[DOM Document Object Model]のHistoryオブジェクト[*** History.pushState()]参考[https://developer.mozilla.org/ja/docs/Web/API/History History - Web API | MDN][https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history ブラウザの履歴を操作する - 開発者ガイド | MDN]
Process Node
[*# The process object is a global that provides information about, and control over, the current [Node.js] process.][https://nodejs.org/dist/latest-v12.x/docs/api/process.html#process_process Process | Node.js v12.13.1 Documentation]
DOM event イベント
[DOM Document Object Model]の[Event イベント]関係のメモ[*** [preventDefault]]処理キャンセルによく使う[https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault Event.preventDefault() - Web API | MDN][https://qiita.com/tochiji/items/4e9e64cabc0a1cd7a1ae JavaScriptのpreventDefault()って難しくない?preventDefault()を使うための前提知識 - Qiita]
v-on イベントハンドリング
[Vue.js]の[DOM Document Object Model][イベントハンドリング]用[ディレクティブ][*** .prevent][preventDefault][*** クリックイベント]右クリック時の反応を変えたりする
Functional Component
React
react-declassify
https://github.com/wantedly/react-declassify[React]の[Class Component]を[Functional Component]に書き換える際に利用出来そう手動書き換えダルいので、楽になるなら使いたい
Component コンポーネント code
[Web front-end]において[UI]の部品を[モジュール modules]化したもの[Vue.js]においてVue.jsのコンポーネント再利用可能なVueインスタンス
Error Boundaries React
[https://ja.reactjs.org/docs/error-boundaries.html Error Boundary – React]デフォルトすべての子をレンダリングするだけで、実際には何もしない普通のラッパーもしそこにエラーがあった場合[react]は最も近いError Boundariesか、スタティックメソッドを実装している最も近いコンポーネントを探して、[Error エラー]を渡す
2021/10/13
[select option タグ][Functional Component]#後で消す
Lottie
New Links
mutable 可変
Created
5 years ago
by
kii : Kiichi Sugihara
Updated
4 years ago
by
kii : Kiichi Sugihara
Views: 31
Page rank: 5.2
Copy link
Copy readable link
Start presentation
Hide dots
useRef hooks
mutable 可変
な
ref react
オブジェクトを返すフック
特定の
DOM Document Object Model
要素へのアクセスや、置き換え可能な値の保持に利用
Functional Component
でも
DOM Document Object Model
要素にアクセス可能になった